<template>
	<div class="change">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>修改提现密码</span>
			<span class="img"></span>
		</div>
		<div class="form">
			<div class="phoneCode">
				<span>手机号</span>
				<p>{{phoneCode}}</p>
			</div>
			<div class="phoneCode" style="margin-top: 0; border-top: #262934 solid 1px;">
				<span>验证码</span>
				<input type="text" name="" v-model="inputCode" value="" placeholder="请输入验证码" style="width:1rem;"  maxlength="6"/>
				<a style="color: #FFFC25;" @click="getphoneCode" v-text='phoneCodetitle'></a>
			</div>
			<div class="list">
				<span style="color: white;width:1.73333rem;">提现密码</span>
				<input v-if='ispassword' type="password" maxlength="6" v-model='password' placeholder='由6位纯数字组成' @keyup='isCleanShow'>
				<input v-if='!ispassword' type="text" maxlength="6" v-model='password' placeholder='由6位纯数字组成' @keyup='isCleanShow'>
				<img src="../../assets/icon_clean.png" v-show="passShow" @click='isPassWrodClean' alt="">
				<img class="rIcon" :src="passwordSrc" alt="" @click='checkTpye'>
			</div>
			<div class="list">
				<span style="color: white; width:1.73333rem;">确认密码</span>
				<input v-if='newispassword' type="password" maxlength="6" v-model='newpassword' placeholder='再次输入新提现密码' @keyup='newisCleanShow'>
				<input v-if='!newispassword' type="text" maxlength="6" v-model='newpassword' placeholder='再次输入新提现密码' @keyup='newisCleanShow'>
				<img src="../../assets/icon_clean.png" v-show="newpassShow" @click='newisPassWrodClean' alt="">
				<img class="rIcon" :src="newpasswordSrc" alt="" @click='newcheckTpye'>
			</div>
			
		</div>
		<v-button buttonText='确认修改' :isActive='isActive' topNum='0.8rem' @toNext='checkPwdCode'></v-button>
	</div>
</template>

<script>
import my from '@/api/my/index'
import login from '@/api/login/index'
import Button from '@/components/Button'
import { toast,setwithdrawalPwd } from '@/util/index'
export default{
	data(){
		return{
			phoneCodetitle:"获取验证码",
			phoneCode:"",
			count: 60,
			password: '',
			inputCode:"",
			passShow: false,
			passwordSrc: require('../../assets/icon_hide_pwd.png'),
			ispassword: true,
			
			newpassword: '',
			newpassShow: false,
			newpasswordSrc: require('../../assets/icon_hide_pwd.png'),
			newispassword: true,
			
			
		}
	},
	components: {
		'v-button': Button
	},
	computed: {
		isActive: function () {
			if (setwithdrawalPwd(this.password)&&setwithdrawalPwd(this.newpassword)&&this.password==this.newpassword&&this.inputCode) {
				return true
			} else {
				return false
			}
		}
	},
	methods:{
		back() {
			this.$router.back(-1)
		},
		isPhone() {
			if (!(/^1[34578]\d{9}$/.test(phone)) || phone.length != 11) {
				return false
			} else if (/^1[34578]\d{9}$/.test(phone) && phone.length == 11) {
				return true;
			}
		},
		isCleanShow() {
			if (this.mobile != '') {
				this.iconShow = true
			} else {
				this.iconShow = false
			}
			if (this.password != '') {
				this.passShow = true
			} else {
				this.passShow = false
			}
		},
		
		isPassWrodClean() {
			if (this.password != '') {
				this.password = ''
				this.passShow = false
				return 
			}
		},
		checkTpye() {
			this.ispassword = !this.ispassword;
			if (!this.ispassword) {
				this.passwordSrc = require('../../assets/icon_show_pwd.png')
			} else {
				this.passwordSrc = require('../../assets/icon_hide_pwd.png')
			}
		},
		newisCleanShow() {
			
			if (this.newpassword != '') {
				this.newpassShow = true
			} else {
				this.newpassShow = false
			}
		},
		
		newisPassWrodClean() {
			if (this.newpassword != '') {
				this.newpassword = ''
				this.newpassShow = false
				return 
			}
		},
		newcheckTpye() {
			this.newispassword = !this.newispassword;
			if (!this.newispassword) {
				this.newpasswordSrc = require('../../assets/icon_show_pwd.png')
			} else {
				this.newpasswordSrc = require('../../assets/icon_hide_pwd.png')
			}
		},
		checkPwdCode(){
			let encrypt = new JSEncrypt();
			encrypt.setPublicKey(this.$store.state.commonkey);
			let senddata = {
				phone:this.$store.state.phone,
				code:this.inputCode,
				newPwd: encrypt.encrypt(this.newpassword),
				userId:window.localStorage.getItem("token"),
				plat:"mlj"
			}
			my.checkPwdCode(senddata).then((data) => {
				if (data.data.code == 200) {
					this.login();
				} else {
					toast(data.data.message)
				}
			})
			
		},
		login() {
			let encrypt = new JSEncrypt();
			encrypt.setPublicKey(this.$store.state.commonkey);
			let senddata = {
				phone:this.$store.state.phone,
				code:this.inputCode,
				newPwd: encrypt.encrypt(this.newpassword),
				userId:window.localStorage.getItem("token"),
				plat:"mlj"
			}
			if (this.isActive) {
				my.backPayPwd(senddata).then((data) => {
					if (data.data.code == 200) {
						toast("提现成功");
						this.$router.push({ path: '/my' })
					} else {
						if(data.data.message="手机号码被占用"){
							toast("该手机号码获取验证码次数频繁，请稍后再获取")
						}else if(data.data.message="页面效果不好"){
							toast("该号码获取验证码次数频繁")
						}
						
					}
				})
			}
		},
		getphoneCode() {
            if (this.phoneCode) {
                if (this.count != 60) {
                    return false
                }
                let timer = setInterval(() => {
                    this.count--
                    this.phoneCodetitle = `${this.count}秒`
                    if (this.count == 0) {
                        clearInterval(timer)
                        this.phoneCodetitle = '获取验证码'
                        this.count = 60
                    }
                }, 1000)
                let sendData={
                    phone:this.phoneCode,
                    plat:"mlj"
                }
                login.getForgotCode(sendData).then(data => {
                    if (data.data.code == 200) {
                        
                    } else {
                       	if(data.data.message="手机号码被占用"){
							toast("该手机号码获取验证码次数频繁，请稍后再获取")
						}else if(data.data.message="页面效果不好"){
							toast("该号码获取验证码次数频繁")
						}
                    }
                })
            }
        },
	},
	mounted(){
		this.phoneCode=window.localStorage.getItem("phone");
	},
	beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	     next()
	}
}



</script>

<style lang="less" scoped>
@import '../../less/config.less';
.change{
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		img,.img{
			width: @p30;
			height: @p30;
		}
	}
	.phoneCode{
		span{
			width: 1.73333rem;
		}
		height: 1.1733rem;
		padding: 0 @p30;
		margin-top: @fsize;
		font-size: 0.42667rem;
		background-color: #141723;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color:white;
		a{
			text-decoration: none;
			width: 2.93rem;
			height: 1rem;
        	line-height: 1rem;
        	border-left: 1px solid #262934;
        	text-align: center;
		}
		p,input{
			flex: 1;
			margin-left: .48rem;
			color: white;
			border: none;
		}
		input::-webkit-input-placeholder {
			/* WebKit browsers*/
			color: @placeColor;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 4 to 18*/
			color: @placeColor;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 19+*/
			color: @placeColor;
		}
		input:-ms-input-placeholder {
			/* Internet Explorer 10+*/
			color: @placeColor;
		}
		
	}
	.list {
		span{
			display: inline-block;
			height: auto;
			width:1.73333rem;
		}
		height: 1.1733rem;
		padding: 0 @p30;
		margin-top: @fsize;
		position: relative;
		font-size: 0.42667rem;
		background-color: #141723;
		/*filter: alpha(opacity=70);
		-moz-opacity: 0.7;
		-khtml-opacity: 0.7;
		opacity: 0.7;*/
		img {
			width: 0.42667rem;
			line-height: 1.1733rem;
			vertical-align: middle
		}
		.rIcon {
			position: absolute;
			right: @p30;
			top: 0.45rem;
		}
		input {
			margin-left: @p30;
			width: 5.7rem;
			color: #ffffff;
			line-height: 1.1733rem;
		}
		input::-webkit-input-placeholder {
			/* WebKit browsers*/
			color: @placeColor;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 4 to 18*/
			color: @placeColor;
		}
		input::-moz-placeholder {
			/* Mozilla Firefox 19+*/
			color: @placeColor;
		}
		input:-ms-input-placeholder {
			/* Internet Explorer 10+*/
			color: @placeColor;
		}
	}

}



</style>